<template>
	<div class="footprint">
		<h3 class="bg-white align-right container pt10 pb10 c333 fs14" v-if="show" @click="show = false">完成</h3>
		<h3 class="bg-white align-right container pt10 pb10 c333 fs14" v-else @click="show = true">编辑</h3>
		 <ul class="list pb50">
		 	<template v-if="show">
			 	<li v-for="(items,index) in data">
			 		<div class="pl15 pr15 bg-f5 layout" @click="clickAll(items,index)">
			 			<van-checkbox  v-model="items.checked"></van-checkbox>
			 			<h3 class="ml10 flex_1 fs14 black pt15 pb15">{{ items.time }}</h3>
			 		</div>
			 		<ul>
			 			<li  v-for="(item,index) in items.data" @click="clickOn(items,item,index)">
			 				<van-checkbox class="border-b pl15 pr15 pt20 pb20 " v-model="item.checked" v-if="show"> 
			 					<div class="layout ml10">
			 						<img class="mr15" :src="item.img" alt="" style="width:80px;height:80px;object-fit:cover">
					 				<div class="flex_1">
					 					<p class="fs14 black bold mb10 ellipsis" style="width: 16rem">{{ item.goods_name }}
					 						<i class="white bg-subject radius ml5" style="padding:2px 10px" v-if="item.is_new == 0">热门产品</i>
					 						<i class="white bg-subject radius ml5" style="padding:2px 10px" v-if="item.is_new == 1">新品</i>
					 					</p>
					 					<p class="black fs10 mb15">{{ item.introduction }}</p>
										<strong class="fs16 subject ">￥{{ item.price }}</strong>
					 				</div>
			 					</div>
			 				</van-checkbox>
			 			</li>
			 		</ul>
			 	</li>
		 	</template>
			<template v-else>
				<li v-for="items in data">
			 		<h3 class="fs14 black pl15 pr15 pt15 pb15 bg-f5 ">{{ items.time }}</h3>
			 		<ul>
			 			<li class="border-b pl15 pr15 pt20 pb20 layout-juscon" v-for="item in items.data">
			 				<img class="mr15" :src="item.img" alt="" style="width:80px;height:80px;object-fit:cover">
			 				<div class="flex_1">
			 					<p class="fs14 black bold mb10 ellipsis" style="width: 16rem">{{ item.goods_name }}
			 						<i class="white bg-subject radius ml5" style="padding:2px 10px" v-if="item.is_new == 0">热门产品</i>
			 						<i class="white bg-subject radius ml5" style="padding:2px 10px" v-if="item.is_new == 1">新品</i>
			 					</p>
			 					<p class="black fs10 mb15">{{ item.introduction }}</p>
								<strong class="fs16 subject ">￥{{ item.price }}</strong>
			 				</div>
			 			</li>
			 		</ul>
			 	</li>
			</template>
		 </ul>
		<footer class="shopping-close border-t layout bg-white pos-fix h50 lh50 full-width" style="bottom:0px;" v-if="show">
			<div class="flex_1 layout pl15 pr15">
				<div class="layout" @click="selectAll">
					<van-checkbox v-model="checked_all"></van-checkbox>
                    <span class="fs16 c333 ml5">全部足迹</span>
				</div>
			</div>
			<button class="bg-red fs16 white bold bg-de" :class="{ active : boolean }" style="width:100px;" @click="remove">删除</button>
		</footer>
	</div>
</template>

<script>
import { Checkbox, CheckboxGroup } from 'vant';
	export default{
		components: {
			Checkbox,
            CheckboxGroup,
		},
		data()
		{
			return{
				show        : false,
				checked_all : false,
				verify      : false,
				data        : [],
				delete_id   : [],
			}
		},
		computed:
		{
			boolean()
			{
				var boolean = false;
				this.verify = false;
				for(let i in this.data){
                	for(let j in this.data[i].data)
                	{
						if(this.data[i].data[j].checked){
	                		boolean = true;
	                		this.verify = true;
	                	}
                	}
                }
				return boolean;
			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			loadData()
			{
				this.$http.get('/user/footprint').then(res => { 
					this.data = res.data;
				})
			},
			remove()
			{
				if(!this.verify) return;

				for(var i in this.data)
				{
					for(var j in this.data[i].data)
					if(this.data[i].data[j].checked){
						this.delete_id.push(this.data[i].data[j].id)
					}
				}
				let params = {
					fp : this.delete_id
				}
				this.$http.post('/user/delfootprint',params).then( res=> {
					this.show = false;
					this.checked_all = false;
					this.delete_id = [];
					this.loadData();
				})
			},
			clickOn(items,item,index)
			{
                for(let i in items.data){
            		if(!items.data[i].checked){
                		items.checked = false;
                		this.$set(items.data, index, item);
                		break;
                	}
                	else
                	{
                		items.checked = true;
                		this.$set(items.data, index, item);
                	}
                }
                this.isSelectALL();  
			},
			clickAll(items,index)
            {
            	items.checked = !items.checked;
        		for(var i in items.data)
            	{
            		if(items.checked)
        			{
            			items.data[i].checked = true;
            			this.$set(items.data, i, items.data[i]);
        			}
        			else
        			{
        				items.data[i].checked = false;
        				this.$set(items.data, i, items.data[i]);
        			}
            	}
            	this.$set(this.data,index,items);
            	this.isSelectALL();    
            },
			 //全选反选
            selectAll()
            {
            	if(this.checked_all)
            	{
	            	for(var i in this.data)
	            	{
	            		this.data[i].checked = true;
	            		for( var j in this.data[i].data)
	            		{
	            			this.data[i].data[j].checked = true;
	            		}
	            		this.$set(this.data[i].data, j, this.data[i].data[j])
	            	}
            	}
            	else
            	{
					for(let i in this.data) {
	            		this.data[i].checked = false;
	            		for(let j in this.data[i].data)
	            		{
	            			this.data[i].data[j].checked = false;
	            			this.$set(this.data[i].data, j, this.data[i].data[j]);
	            		}
	            	}
            	}
            	this.isSelectALL();
            },
            // 判断全选
            isSelectALL()
            {
 				for(let i in this.data){
                	for(let j in this.data[i].data)
                	{
						if(!this.data[i].data[j].checked){
	                		this.checked_all = false;
	                		return; 
	                	}
	                	else
	                	{
	                		this.checked_all = true;
	                	}
                	}
                }
            }
		}
	}
</script>

<style lang="less">
	.footprint{
		.active{
			background-color: #ea2000;
			color:#fff;
		}
		.list{
			.van-checkbox{
				margin-right: 0;
			}
			.van-checkbox__label{
				margin-left: 0;
			}
			.van-checkbox__icon, .van-checkbox__label{
				line-height: inherit;
			}
		}
	}
</style>
